<template>
  <span v-if="svgContent" v-html="processedSvg"></span>
</template>

<script setup>
import {computed, ref, watch} from 'vue'

const props = defineProps({
  name: {type: String, required: true}, // 图标名称（对应 assets/icons/ 下的文件名）
  size: {type: [String, Number], default: '1em'}, // 图标大小
})

// 解析 SVG 文件
const svgModules = import.meta.glob('../assets/icons/*.svg', {as: 'raw'})
const svgContent = ref('')

// **动态修改 SVG 的宽高**
const processedSvg = computed(() => {
  if (!svgContent.value) return '';

  const sizeValue = typeof props.size === 'number' ? `${props.size}px` : props.size;

  // 使用正则表达式来匹配 `<svg>` 标签，确保替换 width 和 height 属性
  return svgContent.value.replace(/<svg([^>]*)(?=>)/i, (match, attributes) => {
    // 先移除现有的 width 和 height 属性，避免重复添加
    let newAttributes = attributes.replace(/width="[^"]*"|height="[^"]*"/g, '');
    // 然后添加新的 width 和 height 属性
    newAttributes += ` width="${sizeValue}" height="${sizeValue}" style="fill: currentColor;"`;
    return `<svg${newAttributes}>`;
  });
});

// **加载 SVG**
const loadSvg = async () => {
  const path = `../assets/icons/${props.name}.svg`
  if (svgModules[path]) {
    svgContent.value = await svgModules[path]()
  }
}

// 监听 `name` 变化，自动加载新的 SVG
watch(() => props.name, loadSvg, {immediate: true})
</script>

<style scoped>
svg {
  display: inline-block;
  vertical-align: middle;
}
</style>
